<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
    <title>确认借款</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
    <link rel="stylesheet" type="text/css" href="../../css/dm-common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />
    <link rel="stylesheet" type="text/css" href="../../css/home.css" />
    <link rel="stylesheet" type="text/css" href="../../css/default.css" />
    <link rel="stylesheet" href="../../css/ddb2common.css">
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/ddb2.css" />


</head>

<body>
    <div class="mode-bg-header qrjk-header">
        <header class="aui-bar aui-bar-nav dmc-header">
            <a class="aui-pull-left  aui-btn" href="javascript:history.go(-1)">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">确认借款</div>
        </header>
        <div class="qrjk-ed">
            <div class="qrjk-ed-money">4000元</div>
            <div class="qrjk-ed-mark">可借金额</div>
        </div>
        <div class="qrjk-header-remark">
            可借金额是平台经过风控审核后给与的您当前可通过本平台发起的借款金额
        </div>
    </div>
    <div class="aui-range home-range">
        <div class="home-range-text">
            <input type="number" class="range-input" value="17" onfocus="this.value=''" id="demo22"
                onchange="inputchange(this,'demo2',27,7)">
            <div>借款期限(天)</div>
        </div>
        <div class="home-range-input">
            <i class="range-start">7天</i>
            <input type="range" value="17" max="27" min="7" class="aui-range-primary" id="demo2"
                style="background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: 50% 100%;"
                oninput="rangechange(this,'demo22',27,7)">
            <i class="range-end">27天</i>
        </div>
    </div>

    <div class="dm2-btn aui-margin-t-3r">
        我要借款
    </div>

</body>
<script>
    function rangechange(el, input, end, start) {
        let dom = document.getElementById(input);
        dom.value = el.value;
        el.style.cssText =
            "background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: " +
            ((el.value - start) / (end - start)) * 100 + "% 100%;"
    }

    function inputchange(el, input, end, start) {

        let dom = document.getElementById(input);
        if (el.value > end || el.value < start) {
            el.value = "";
            return;
        }
        dom.value = el.value;
        dom.style.cssText =
            "background: -webkit-linear-gradient(rgba(125, 165, 252, 1), rgba(125, 165, 252, 1)) no-repeat, #ddd;background-size: " +
            ((el.value - start) / (end - start)) * 100 + "% 100%;"
    }
</script>

</html>